<template>
	<div class="wodepinpai">
		<div class="wodepin" v-if="$store.state.denglu">
			<div class="shipinjiancetou">
				<div class="paizi1">我的品牌</div>
				<div class="paizi2">
					<span>
						<i class="el-icon-plus"></i>添加品牌
					</span>
					<span v-loading.fullscreen.lock="fullscreenLoading" @click="xiazai">
						<i class="el-icon-printer"></i>导出数据
					</span>
				</div>
			</div>
			
			<div class="wopinbiao">
				<table cellpadding="0" cellspacing="0">
					<thead>
						<tr>
							<th>品牌</th>
							<th>所属行业</th>
							<th>抖音商品数</th>
							<th>带货达人数</th>
							<th>带货视频数</th>
							<th>带货视频点赞数</th>
							<th>操作</th>
						</tr>
					</thead>
					
					<tbody>
						<tr v-for="(item,index) in wopai" :key="index">
							<td>
								<img :src="item.img" />
								<span>{{item.name}}</span>
							</td>
							<td>
								<span>
									{{item.hangye}}
								</span>
							</td>
							<td>
								{{item.doushu | guolv}}
							</td>
							<td>
								{{item.daishu | guolv}}
							</td>
							<td>
								{{item.huoshu | guolv}}
							</td>
							<td>
								{{item.shishu | guolv}}
							</td>
							<td>
								<img @click="shanchu(index)" src="../../../assets/img/laji.png" />
							</td>
						</tr>
					</tbody>
				</table>
				
				<el-dialog
				  title="提示"
				  :visible.sync="centerDialogVisible"
				  width="30%"
				  left>
				  <span class="shanchuma">确认删除吗？</span>
				  <span slot="footer" class="dialog-footer">
				    <el-button @click="centerDialogVisible = false">取 消</el-button>
				    <el-button type="primary" @click="queshan">确 定</el-button>
				  </span>
				</el-dialog>
			</div>
			
			<div class="fenye" style="text-align: center;">
				<el-pagination
				  @size-change="handleSizeChange"
				  @current-change="handleCurrentChange"
				  :hide-on-single-page="yindi"
				  :current-page="currentPage4"
				  :page-sizes="[100, 200, 300, 400]"
				  :page-size="100"
				  layout="total, sizes, prev, pager, next, jumper"
				  :total="4001">
				</el-pagination>
			</div>
			
		</div>
		
		<jinzhi :wenben="wenben" v-else></jinzhi>
	</div>
</template>

<script>
	//禁止看的页面
	import jinzhi from "@/components/components/jinzhiye.vue"
	export default{
		name:"wodepinpai",
		components:{
			jinzhi
		},
		data(){
			return{
				shu:456145,
				wenben:"添加重点关注品牌，了解品牌数据动态",
				
				fullscreenLoading:false,
				//分页
				yindi:true,//当数据是由一页时，就不显示分页器
				currentPage4: 1,
				
				//删除
				centerDialogVisible:false,
				shanId:'',
				
				column:[
					{title:'品牌',key:'name',type:'text'},
					{title:'品牌图',key:'img',type:'image',width:150,height:100},
					{title:'所属行业',key:'hangye',type:'text'},
					{title:'抖音商品数',key:'doushu',type:'text'},
					{title:'带货达人数',key:'daishu',type:'text'},
					{title:'带货视频数',key:'huoshu',type:'text'},
					{title:'带货视频数点赞数',key:'shishu',type:'text'}
				],
				wopai:[
					{
						name:'o((⊙﹏⊙))o',
						img:"https://www.koltuita.com/wxxcx/img/val1.png",
						hangye:'＿|￣|●',
						doushu:1243242,
						daishu:56234345634,
						huoshu:893485232,
						shishu:8236947294
					},
					{
						name:'ψ(*｀ー´)ψ',
						img:"https://www.koltuita.com/wxxcx/img/val2.png",
						hangye:'(●—●)',
						doushu:1243242,
						daishu:56234345634,
						huoshu:893485232,
						shishu:8236947294
					},
					{
						name:'Fight!!(ｏ^-^)尸☆ミ☆ミ',
						img:"https://www.koltuita.com/wxxcx/img/val3.png",
						hangye:'⊙(・◇・)？',
						doushu:1243242,
						daishu:56234345634,
						huoshu:893485232,
						shishu:8236947294
					},
					{
						name:'๑Ő௰Ő๑)曾经瘦过，你也是厉害！',
						img:"https://www.koltuita.com/wxxcx/img/val4.png",
						hangye:'ლ(´ڡ`ლ)好吃的.',
						doushu:1243242,
						daishu:56234345634,
						huoshu:893485232,
						shishu:8236947294
					},
					{
						name:'⊙(・◇・)？',
						img:"https://www.koltuita.com/wxxcx/img/val1.png",
						hangye:'hi✿(。◕ᴗ◕。)✿ ',
						doushu:1243242,
						daishu:56234345634,
						huoshu:893485232,
						shishu:8236947294
					},
					{
						name:'(▼ヘ▼#)',
						img:"https://www.koltuita.com/wxxcx/img/val5.png",
						hangye:'get！٩()و ',
						doushu:1243242,
						daishu:56234345634,
						huoshu:893485232,
						shishu:8236947294
					},
					{
						name:'(╥╯﹏╰╥)ง光宗耀祖支撑着我去教室',
						img:"https://www.koltuita.com/wxxcx/img/val4.png",
						hangye:'(´థ౪థ)σ你假期竟然没胖',
						doushu:1243242,
						daishu:56234345634,
						huoshu:893485232,
						shishu:8236947294
					},
					{
						name:'(ﾉ"◑ ◑)ﾉ"(｡•́︿•̀｡)',
						img:"https://www.koltuita.com/wxxcx/img/val1.png",
						hangye:'؏؏☝ᖗ乛◡乛ᖘ☝؏؏完美',
						doushu:1243242,
						daishu:56234345634,
						huoshu:893485232,
						shishu:8236947294
					},
					{
						name:'(=`ｪ´=；)ゞ',
						img:"https://www.koltuita.com/wxxcx/img/val4.png",
						hangye:'|_•`) 躲起来',
						doushu:1243242,
						daishu:56234345634,
						huoshu:893485232,
						shishu:8236947294
					},
					{
						name:'（◐ˍ◑）',
						img:"https://www.koltuita.com/wxxcx/img/val1.png",
						hangye:'(๑⁼̴̀д⁼̴́๑)ﾄﾞﾔｯ‼ What are you 弄啥嘞！',
						doushu:1243242,
						daishu:56234345634,
						huoshu:893485232,
						shishu:8236947294
					},
					{
						name:'（*゜Д゜）σ凸←自爆按钮 ',
						img:"https://www.koltuita.com/wxxcx/img/val4.png",
						hangye:'(((┏(;￣▽￣)┛装完逼就跑',
						doushu:1243242,
						daishu:56234345634,
						huoshu:893485232,
						shishu:8236947294
					},
					{
						name:'ψ(*｀ー´)ψ',
						img:"https://www.koltuita.com/wxxcx/img/val1.png",
						hangye:'(●—●)',
						doushu:1243242,
						daishu:56234345634,
						huoshu:893485232,
						shishu:8236947294
					},
					{
						name:'ฅ•̀∀•́ฅ',
						img:"https://www.koltuita.com/wxxcx/img/val3.png",
						hangye:'(｡•ˇ‸ˇ•｡)滚犊子',
						doushu:1243242,
						daishu:56234345634,
						huoshu:893485232,
						shishu:8236947294
					},
					
				]
			}
		},
		//过滤器
		filters:{
			guolv(shuzi){
			  if(shuzi>0){
				var wan=parseInt(shuzi).toString();
				var qumo=wan%10000;
				//粉丝数改变
				if(wan.length<5){
					shuzi=wan;
				}else if(wan.length>4 && wan.length<=8){
					let fen_si=parseFloat(parseInt(wan/10000))+'.'+qumo.toString().substring(0,2)+'w';
					shuzi=fen_si;
				}else if(wan.length>8){
					let fen_si=parseFloat(parseInt(wan/100000000))+'.'+qumo.toString().substring(0,2)+'亿';
					shuzi=fen_si;
				}
			  }
			  return shuzi
			}
		},
		mounted() {
			//出现加载动画开始和结束
			this.$store.commit("startLoading")
			this.$store.commit("endLoading")
		},
		methods:{
			//删除
			shanchu(index){
				this.centerDialogVisible = true;
				this.shanId=index;
			},
			//确认删除
			queshan(){
				this.centerDialogVisible = false;
				console.log(this.shanId);
			},
			
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
			},
			
			xiazai(){
				//点击导出表格数据到exe表
				this.fullscreenLoading = true;
				setTimeout(() => {
					this.fullscreenLoading = false;
					this.$message.success("数据导出成功！")
					
					this.table2excel(this.column, this.wopai, "品牌榜单")//生成Excel表格，自动下载
				}, 2000);
			},
		}
	}
</script>

<style scoped="scoped" lang="scss">
	*{
		margin: 0;
		// padding: 0;
	}
	.wodepinpai{
		
		.wodepin{
			
			.shipinjiancetou{
				padding: 0 0.6rem;
				height: 100%;
				box-sizing: border-box;
				position: relative;
				
				.paizi1{
					font-size: 0.7rem;
					margin-left:0.3rem ;
					color: #333333;
					letter-spacing: 0.05rem;
					float: left;
					padding-top:0.4rem ;
				}
				
				.paizi1::before{
					content: "";
					display: block;
					position: absolute;
					top: 0.4rem;
					left: 0;
					width: 0.3rem;
					height: 1rem;
					background-color: #0091FF;
				}
				
				.paizi2{
					float: right;
					
					span{
						cursor: pointer;
						background-color: #fff;
						color: #0091FF;
						font-size: 0.4rem;
						border: 1px solid #D4D4D4;
						padding: 0.1rem 0.3rem;
						border-radius:0.1rem ;
						
						i{
							margin-right:0.4rem ;
						}
					}
					span:nth-of-type(1){
						margin-right:0.6rem ;
					}
					span:hover{
						background-color: #0091FF;
						color: #fff;
					}
				}
			}
			.shipinjiancetou::after{
				content: "";
				display: block;
				clear: both;
			}
			
			.wopinbiao{
				margin-top:1rem ;
				background-color: #fff;
				border-radius:0.1rem ;
				
				table{
					width: 100%;
					padding: 0 1rem;
					
					th{
						color: #333333;
						font-size: 0.43rem;
						font-weight: normal;
						padding: 1rem 0;
						border-bottom:1px solid #E7E7E7 ;
					}
					th:nth-of-type(1){
						text-align: left;
					}
					th:nth-of-type(1){
						width: 6rem;
					}
					td{
						color: #333333;
						font-size: 0.4rem;
						text-align: center;
						padding: 0.8rem 0;
					}
					td:nth-of-type(1){
						text-align: left;
						display: flex;
						align-items: center;
						img{
							width: 1.2rem;
							height: 1.2rem;
							border-radius:50% ;
						}
						span{
							width: 3rem;
							margin-left:0.4rem ;
							
							overflow : hidden;
							text-overflow: ellipsis;
							display: -webkit-box; 
							-webkit-line-clamp: 1; /* 可以显示的行数，超出部分用...表示*/
							-webkit-box-orient: vertical;
						}
					}
					
					td:nth-of-type(2){
						
						span{
							width:100%;
							
							overflow : hidden;
							text-overflow: ellipsis;
							display: -webkit-box; 
							-webkit-line-clamp: 1; /* 可以显示的行数，超出部分用...表示*/
							-webkit-box-orient: vertical;
						}
					}
					
					td:last-child{
						img{
							width: 0.4rem;
							cursor: pointer;
						}
					}
				}
				.shanchuma{
					display: block;
					text-align: center;
					font-size: 0.4rem;
				}
			}
		}
		
	}
</style>
